<template>
  <div class="page-content">
    <div class="head">
      <el-button type="primary" icon="el-icon-menu" @click="resetWxMenu"
        >初始化微信菜单</el-button
      >
      <el-button type="danger" icon="el-icon-check" @click="saveWxData"
        >保存</el-button
      >
    </div>
    <div class="form">
      <el-form :model="wxform" ref="wxform">
        <div class="Datasetting">
          <h1 class="title">微信账号设置</h1>
          <el-form-item label="Url：" prop="sUrl">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input v-model="wxform.sUrl" placeholder="" />
            </el-col>
          </el-form-item>
          <el-form-item label="Token：" prop="token">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input v-model="wxform.token" placeholder="" />
            </el-col>
          </el-form-item>
          <el-form-item label="AppId(应用ID)：" prop="appid">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input v-model="wxform.appid" placeholder="" />
            </el-col>
          </el-form-item>
          <el-form-item label="Secret(应用密钥)：" prop="secret">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input v-model="wxform.appsecret" placeholder="" />
            </el-col>
          </el-form-item>
          <el-form-item label="Mch_id(商铺ID)：" prop="mch_id">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input
                v-model="wxform.mch_id"
                placeholder=""
                @input="change($event)"
              />
            </el-col>
          </el-form-item>
          <el-form-item label="ApiKey(接口密钥)：" prop="api_key">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input
                v-model="wxform.api_key"
                placeholder=""
                @input="change($event)"
              />
            </el-col>
          </el-form-item>
          <el-form-item label="ApiUid(商铺UID)：" prop="api_uid">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input v-model="wxform.api_uid" placeholder="" />
            </el-col>
          </el-form-item>
          <h1 class="title">公众号二维码</h1>
          <el-upload
            :action="dataUrl"
            :data="uploadData"
            :show-file-list="false"
            :before-upload="beforeUpload"
            list-type="picture-card"
            :on-success="refresh"
          >
            <img
              v-if="dialogImageUrl"
              :src="dialogImageUrl"
              width="200"
              style="padding-top:10px"
            />
            <i v-else class="el-icon-plus"></i>
          </el-upload>
        </div>
        <div class="Datasetting">
          <h1 class="title">支付宝账号设置</h1>
          <el-form-item label="partner(合作身份者ID)：" prop="partner">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input v-model="wxform.partner" placeholder="" />
            </el-col>
          </el-form-item>
          <el-form-item label="key(交易安全检验码)：" prop="key">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input v-model="wxform.key" placeholder="" />
            </el-col>
          </el-form-item>
          <el-form-item
            label="seller_email(签约支付宝账号)："
            prop="seller_email"
          >
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input v-model="wxform.seller_email" placeholder="" />
            </el-col>
          </el-form-item>
          <el-form-item label="app_id：" prop="app_id">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input v-model="wxform.app_id" placeholder="" />
            </el-col>
          </el-form-item>
          <el-form-item label="private_key：" prop="private_key">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input v-model="wxform.private_key" placeholder="" />
            </el-col>
          </el-form-item>
          <el-form-item label="alipay_public_key：" prop="alipay_public_key">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input v-model="wxform.alipay_public_key" placeholder="" />
            </el-col>
          </el-form-item>
          <el-form-item label="notify_url：" prop="notify_url">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input v-model="wxform.notify_url" placeholder="" />
            </el-col>
          </el-form-item>
        </div>
        <div class="Datasetting">
          <h1 class="title">EPC账号设置</h1>
          <el-form-item label="账号：" prop="eusername">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input v-model="wxform.eusername" placeholder="" />
            </el-col>
          </el-form-item>
          <el-form-item label="密码：" prop="epassword">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input
                type="password"
                v-model="wxform.epassword"
                placeholder=""
              />
            </el-col>
          </el-form-item>
          <el-form-item label="open_id：" prop="open_id">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input v-model="wxform.open_id" placeholder="" />
            </el-col>
          </el-form-item>
          <el-form-item label="secret_key：" prop="secret_key">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input v-model="wxform.secret_key" placeholder="" />
            </el-col>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { weChatApi } from "@/api/cardApi";
import { weChatinitMenusApi } from "@/api/cardApi";
import { PayManagerApi } from "@/api/cardApi";
import { baseUrl } from "@/utils/config";

export default {
  inject: ["reload"],
  data() {
    return {
      uploadData: {
        guestcode: "",
        gscode: ""
      },
      content: "",
      dataUrl: baseUrl + "/api/Card/weChatQrcode",
      headers: {
        Authorization: ""
      },
      wxform: {
        sUrl: "",
        token: "",
        appid: "",
        secret: "",
        mch_id: "",
        api_key: "",
        api_uid: "",
        partner: "",
        key: "",
        seller_email: "",
        app_id: "",
        private_key: "",
        alipay_public_key: "",
        notify_url: "",
        eusername: "",
        epassword: "",
        open_id: "",
        secret_key: ""
      },
      value: "",
      dialogImageUrl: ""
    };
  },
  mounted() {
    this.wechatData();
  },
  methods: {
    wechatData() {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      weChatApi({
        guestcode: guestcode,
        gscode: gscode,
        username: username,
        userid: userid,
        menuename: "WechatSetting",
        menucname: "授权设置",
        logintype: logintype,
        posttype: posttype,
        op_type: "查询"
      }).then(res => {
        this.wxform = res.data;
        this.wxform.sUrl = res.sUrl;
        this.wxform.token = res.token;
        this.wxform.appid = res.appid;
        this.wxform.secret = res.secret;
        this.wxform.mch_id = res.mch_id;
        this.wxform.api_key = res.api_key;
        this.wxform.api_uid = res.api_uid;
        this.dialogImageUrl = res.qrcode;
        this.dataUrl =
          this.dataUrl + "?guestcode=" + guestcode + "&gscode=" + gscode;
      });
    },
    beforeUpload(file) {
      this.uploadData.guestcode = JSON.parse(
        JSON.stringify(this.$store.state.user.user.info)
      ).reguserno;
      this.uploadData.gscode = JSON.parse(
        JSON.stringify(this.$store.state.user.user.info)
      ).gscode;
    },
    change(e) {
      this.$forceUpdate();
    },
    resetWxMenu() {
      this.$confirm("您确定要初始化公众号菜单吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let userdata = JSON.stringify(this.$store.state.user.user.info);
          userdata = JSON.parse(userdata);
          let guestcode = userdata.reguserno;
          let gscode = userdata.gscode;
          let username = userdata.userName;
          let userid = userdata.id;
          let logintype = userdata.logintype;
          let posttype = userdata.posttype;
          weChatinitMenusApi({
            guestcode: guestcode,
            gscode: gscode,
            query: this.wxform.appid,
            username: username,
            userid: userid,
            menuename: "WechatSetting",
            menucname: "授权设置",
            logintype: logintype,
            posttype: posttype,
            op_type: "初始化菜单",
            note: this.wxform.appid
          }).then(res => {
            if (res.code == "0") {
              this.$message.success(res.msg);
            }
          });
        })
        .catch(() => {});
    },
    saveWxData() {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      PayManagerApi({
        guestcode: guestcode,
        gscode: gscode,
        mch_id: this.wxform.mch_id,
        api_key: this.wxform.api_key,
        partner: this.wxform.partner,
        key: this.wxform.key,
        seller_email: this.wxform.seller_email,
        app_id: this.wxform.app_id,
        private_key: this.wxform.private_key,
        alipay_public_key: this.wxform.alipay_public_key,
        notify_url: this.wxform.notify_url,
        eusername: this.wxform.eusername,
        epassword: this.wxform.epassword,
        open_id: this.wxform.open_id,
        secret_key: this.wxform.secret_key,
        username: username,
        userid: userid,
        menuename: "WechatSetting",
        menucname: "授权设置",
        logintype: logintype,
        posttype: posttype,
        op_type: "保存",
        note: JSON.stringify(this.wxform)
      }).then(res => {
        if (res.code == "0") {
          this.$message.success(res.msg);
          this.refresh();
        }
      });
    },
    refresh() {
      this.reload();
    }
  },
  computed: {}
};
</script>

<style lang="scss" scoped>
.page-content {
  overflow: hidden;
  .head {
    margin-bottom: 10px;
  }
  .el-upload-list--picture-card .el-upload-list__item-actions {
    margin-top: 20px !important;
  }
  .title {
    font-size: 22px;
    font-weight: 500;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  .form {
    width: 100%;
    .Datasetting {
      float: left;
      width: 48%;
      margin-right: 10px;
    }
    .editor {
      margin-top: 15px;

      .ql-editor {
        min-height: 500px;
      }
    }

    ::v-deep .el-upload--picture-card {
      width: 220px;
      height: 220px;
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }
  @media only screen and (max-width: $device-ipad) {
    .Datasetting {
      float: unset !important;
      width: 100% !important;
    }
  }
}
</style>
